
import { Result, Button,Typography } from 'antd';
import router from 'umi/router';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './index.less';
import {connect} from 'dva';
import { List, Avatar, Icon } from 'antd';
import { Card } from 'antd';
import Commentsn  from './Commentsn'
const ButtonGroup = Button.Group;


const { Paragraph } = Typography;
const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

const namespace = 'showdetails';

const mapStateToProps1 = (state) => {
  const cardList = state[namespace].data;
  //console.log("the cardlist is ",cardList);
  return {
    cardList,
  };
};




const details = [{
    id: '4',
    name: 'nginx',
    url: "www.baidu.com",
    description: 'Use the nginx you could make a server',
    tags: ['cool', 'teacher'],
}];
@connect(mapStateToProps1)
class showDetails extends React.Component{


    handleSubmit = e => {
    e.preventDefault();
    console.log('Submit1!!!');

/*    this.props.form.validateFields((errors, values) => {
      if (errors) {
        console.log('Errors in the form!!!');
        return;
      }
      console.log('Submit!!!');
      console.log(values);
    });*/
  };
  handleReback = e => {
    e.preventDefault();
    console.log("hello");
    router.push({
                pathname: '/result',

            });
  };

  render(){
    const {cardList} =  this.props ;
    //console.log("the carlis",cardList);
    const name = cardList.name;
    const description = cardList.description;
    const comments = cardList.comment;
    return (
      <div>
      <div className={styles.header}>
          <PageHeaderWrapper content={description} className={styles.main}  title={name} avatar = {<Avatar src="http://img0.imgtn.bdimg.com/it/u=1142340810,4197896472&fm=214&gp=0.jpg"/>}>
      </PageHeaderWrapper>
      </div>

    <div className={styles.title}>
    <Paragraph>
      Ant Design interprets the color system into two levels: a system-level color system and a
      product-level color system.
    </Paragraph>
    <Commentsn card={cardList} comments={comments}></Commentsn>
    </div>
    </div>

      )
  }
}
export default showDetails;